<template>
    <div>
        <div class="commonForm commonRow" v-if="type === 1">
            <a-row type="flex" class="row" v-for="(item, index) in tableForm" :key="index">
                <a-col :span="ele.span" :class="ele.props ? 'value' : 'label'" v-for="ele in item" :key="ele.props">
                    <span class="red" v-if="!ele.props && !ele.noRequired">*</span>
                    <span v-if="!ele.props">{{ ele.label }}</span>
                    <a-input v-if="ele.props && !ele.type" v-model.trim="ele.value" class="ml10"
                        :placeholder="ele.placeholder"
                        v-decorator="[ele.props, { rules: [{ required: true, message: 'Please input your note!' }] }]">
                    </a-input>
                    <a-textarea v-model="ele.value" :auto-size="{ minRows: 5, maxRows: 10 }"
                        v-if="ele.type === 'textarea'" class="ml10" :placeholder="ele.placeholder" />
                    <div class="ml10" :class="ele.isShowOther ? 'isShowOther' : ''">
                        <a-radio-group v-model="ele.radioValue" v-if="ele.type === 'radio'"
                            @change="radioChange($event, ele)">
                            <a-radio :value="v.value" v-for="(v, i) in ele.plainOptions" :key="v.value">
                                {{ v.label }}
                                <a-input v-model="ele.inputValue" :disabled="!ele.disabled"
                                    v-if="ele.isShowOther && ele.plainOptions.length - 1 === i"
                                    @change="inputChange($event, ele)"></a-input>
                            </a-radio>
                        </a-radio-group>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="uploadForm commonRow" v-if="type === 2">
            <a-row type="flex" class="row" v-for="(item, index) in tableForm" :key="index">
                <a-col class="uploadFile label" :span="ele.span" v-for="ele in item" :key="ele.props">
                    <div>{{ ele.label }}</div>
                    <AUploadMultiple v-if="ele.type === 'upload'" :isShowText="false" btnText="上传" :instance="instance"
                        @change="downChange($event, ele)" :multipleNumber="1" ref="aUploadMultiple"></AUploadMultiple>
                    <a-checkbox-group class="table-checkbox-wrap" v-model="ele.value" :options="ele.plainOptions" @change="checkChange"
                        v-if="ele.type === 'check'" />
                    <a-textarea v-model="ele.value" :auto-size="{ minRows: 5, maxRows: 10 }"
                        v-if="ele.type === 'textarea'" />
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
import AUploadMultiple from '@/views/backstageSupport/components/formTable/components/AUploadMultiple'
export default {
    props: {
        tableForm: {
            type: Array,
            default: () => []
        },
        type: {
            type: Number,
            default: 1
        }
    },
    components: { AUploadMultiple },
    watch: {},
    data () {
        return {
            instance: {
                prop: 'picPath'
            }
        }
    },
    methods: {
        handleChange () { },
        checkChange () { 
            
        },
        radioChange (e, item) {
            let arr = item.plainOptions.filter(ele => ele.value === e.target.value)
            if (item.inputValue) {
                item.inputValue = ''
            }
            if (arr && arr.length > 0) {
                let label = arr[0].label
                // input 选择其他时，填写
                if (label === '其他') {
                    item.disabled = true
                    item.sourceProps = item.props
                    item.props = item.otherProps
                } else {
                    // 正常情况的选择
                    item.value = item.radioValue
                    item.disabled = false
                    if (item.sourceProps) {
                        item.props = item.sourceProps
                    }
                }
            }


        },
        inputChange (e, item) {
            item.value = item.inputValue
        },
        downChange (val, item) {
            if (val && val[0] && val[0].response && val[0].response.data && val[0].response.data[0].fileId) {
                item.value = val[0].response.data[0].fileId
            }else{
                item.value = ''
            }
        },
        clearUpload(){
            this.$refs.aUploadMultiple.forEach(item=>{
                item.clearFile()
            })
        }
    }
}
</script>
